<template>
  <div class="bg-white">
    <div class="sticky top-0 z-10 shadow-sm shadow-black-500/40">
      <nut-searchbar v-model="searchValue" background="#fff" @search="searchInput" placeholder="请输入线索名称">
        <template v-slot:leftin>
          <Search2 />
        </template>
      </nut-searchbar>
    </div>

    <div class="p-3" v-if="clueList.length > 0">
      <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
        <div
          class="p-3 text-sm relative mb-2 border-b-1 border-light-400 last:border-b-0 bg-white rounded-lg"
          v-for="item in clueList"
          :key="item.id"
        >
          <div class="text-base mb-1">姓名：{{ item.clientName }}</div>
          <div class="mb-1 c-gray-5">手机号： {{ item.clientPhone }}</div>
          <div class="mb-1 c-gray-5">
            <span class="">上报时间：{{ timeFormat(item.createTime) }}</span>
            <span class="text-sm ml-6">剩余保护期：{{ getResidueTime(item.createTime, item.validDays) }}天</span>
          </div>
          <div
            class="absolute right-5 top-4 text-base c-gray-4"
            :class="{
              'text-red-5': isEffective(item.createTime, item.validDays),
            }"
          >
            {{ isEffective(item.createTime, item.validDays) ? "有效" : "已失效" }}
          </div>
        </div>
      </nut-infinite-loading>
    </div>
    <div v-else class="fixed inset-0 flex justify-center items-center">
      <nut-empty description="无数据"></nut-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search2 } from "@nutui/icons-vue";
import * as promotionApi from "@/api/train/promotion";

const clueList = ref<MyHistoryClue[]>([]);
const searchValue = ref("");

const pagination = ref({
  pageNo: 1,
  pageCount: 10,
});
// 无限加载的配置项
const infinityValue = ref(false);
const hasMore = ref(true);

// 日期格式化
const timeFormat = (time: number) => new Date(time).toLocaleDateString().replace(/\//g, "-");
// 获取剩余保护期
const getResidueTime = (time: number, dayNum: number) => {
  const now = new Date().getTime();
  const residueTime = Math.ceil((time + dayNum * 24 * 60 * 60 * 1000 - now) / 1000 / 60 / 60 / 24);
  return residueTime > 0 ? residueTime : 0;
};
// 是否有效
const isEffective = (time: number, dayNum: number) => getResidueTime(time, dayNum) > 0;

// 获取数据
const getData = async (params) => {
  let res = await promotionApi.myClueList(params);

  res.data.list.forEach((item: any) => {
    item.clue_status = 1;
    if (item.residueTime === 0) {
      item.clue_status = 2;
    }
  });
  return res.data.list;
};

// 加载数据
const loadMore = async () => {
  pagination.value.pageNo += 1
  let list = await getData({
    keyword: searchValue.value,
    ...pagination.value,
  });
  if (list.length > 0) {
    clueList.value = [...clueList.value, ...list];
    infinityValue.value = false;
    return;
  }
  infinityValue.value = false;
  hasMore.value = false;
};

// 搜索回车
const searchInput = async (e) => {
  searchValue.value = e;
  pagination.value.pageNo = 1;
  clueList.value = await getData({
    keyword: searchValue.value,
    ...pagination.value,
  });
  window.scrollTo(0, 0);
};

searchValue.value = "";
pagination.value.pageNo = 1;
getData({
  keyword: searchValue.value,
  ...pagination.value,
}).then((res) => {
  clueList.value = res;
});
// window.scrollTo(0, 0);
</script>
